<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            用户名:<input type="text" v-model.lazy="username">
            <!-- model双向绑定显示在页面上 -->
            {{username}}
        </div>
        <div>
            密码:<input type="password" v-model.trim="password">
            {{password}}
        </div>
        <div>
            <!-- radrio单选按钮，name:公共类名,value:二选一 -->
            性别:<input type="radio" name="sex" v-model="sex" value="男">男
            <input type="radio" name="sex" v-model="sex" value="女">女
            我选择的是--{{sex}}
        </div>

        <div>
            阶段：<select name="" id="" v-model="lesson">
                <option value="" disabled>请选择</option>
                <option :value="1" >一阶段</option>
                <option :value="2" >二阶段</option>
            </select>
            {{lesson===1?'一阶段':lesson===2?'二阶段':'三阶段'}}
        </div>

        <div>
            <span>爱好</span>
            <input type="checkbox" name="faveriate" value="篮球" v-model="faveriate">
            <input type="checkbox" name="faveriate" value="唱" v-model="faveriate">
            <input type="checkbox" name="faveriate" value="rap" v-model="faveriate">
            {{faveriate}}
        </div>

        <div>
            <span>做嘛耶</span>
            <textarea v-model="note" name="" id="" cols="30" rows="10"></textarea>{{note}}
        </div>

        <div>
            <input type="checkbox" v-model="flag">同意。。。协议{{flag}}
        </div>

        <div>
            <input type="month" name="" id="">
        </div>

        <div>
            <input type="submit" value="提交" @click="submit">
        </div>
    </div>
</body>
<script src="./lib//vue.global.js"></script>
<script>
    const {createApp}=Vue 
    createApp({
        data() {
            return {
                username:'',
                password:'',
                sex:'男',
                lesson:'',
                note:'',
                faveriate:['学习'],
                flag:true
            }
        },
        methods:{
            submit(){
                if(this.flag){
                console.log({
                    userName:this.userName,
                    password:this.password,
                    sex:this.sex,
                    lesson:this.lesson,
                    note:this.note,
                    hobby:this.hobby
                })
                }else{
                alert('请先勾选用户协议')
                }
            }
        }
    }).mount('#app')
</script>
</html>